<template>
  <div class="login-container" style="height: 100%;width:100%;position:fixed">
    <div class="login-box">
      <div class="left">
        <img src="/src/assets/side-logo.png" alt="" style="width: 100%;">
      </div>
      <div class="right">
        <form class="login-form" @submit.prevent="submitForm" >
          <h2 class="login-title"><img src="/src/assets/logo.svg" alt="" style="width: 3rem; height: 3rem; margin-right: 1.5rem;"><strong>算法打卡平台</strong></h2>
          <el-form-item prop="username" >
            <el-input v-model="form.username" name="username" :prefix-icon="User" :readonly="loading" :clearable="true" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input type="password" name="password" v-model="form.password" :readonly="loading" :prefix-icon="Lock " :clearable="true" show-password placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;height:3rem;font-size: 1.2rem;" native-type="submit" :loading="loading" >登&nbsp;&nbsp;&nbsp;录</el-button>
          </el-form-item>
		  <el-form-item>
			<p class="phover" style="margin: auto 0 auto auto;" @click="dialogVisible = true">没有账号？立即注册</p>
		  </el-form-item>
        </form>
		
		  <el-dialog
		    v-model="dialogVisible"
		    title="用户注册"
		    width="60%"
		    :before-close="handleClose"
		  >
		   
		   <form class="register-form" :model="rform"  :label-position="right">
		    <el-form-item prop="username" label="用户" >
		       <el-input v-model="rform.username" name="username" :prefix-icon="User" :readonly="loading" :clearable="true" placeholder="账号"></el-input>
		     </el-form-item>
		     <el-form-item prop="password"  label="密码"  >
		       <el-input type="password" name="password" v-model="rform.password" :readonly="loading" :prefix-icon="Lock " :clearable="true" show-password placeholder="密码" ></el-input>
			   <el-icon v-show="datas.sime&&rform.password!=''" style="color: #00ff15; margin-left: 5px;font-size:20px;"><SuccessFilled /></el-icon>
		     </el-form-item>
		     <el-form-item>
				<el-form-item prop="rpassword"  label="密码" >
				  <el-input type="password" name="rpassword" v-model="rform.rpassword" :readonly="loading" :prefix-icon="Lock " :clearable="true" show-password @blur="rpinput" placeholder="再次输入密码"></el-input>
				  <p v-show="datas.unsime" style="color: red; width: 100px;"><p >两次输入不一致</p></p>
				  <el-icon v-show="datas.sime&&rform.password!=''" style="color: #00ff15; margin-left: 5px;font-size:20px;"><SuccessFilled /></el-icon>
				</el-form-item>
		    </el-form-item>
		    <el-form-item prop="school"  label="学校" >
		       <el-input v-model="rform.school" name="school" :prefix-icon="User" :readonly="loading" :clearable="true" placeholder="学校"></el-input>
		     </el-form-item>
			 <el-form-item prop="classid"  label="班级" >
			    <el-select v-model="rform.classid" name="classid" :readonly="loading"  :clearable="true" placeholder="班级" >
					<el-option 
					v-for="item in datas.classes" 
					:key="item.id"
					:label="item.class_name"
					:value="item.id"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item
			     prop="studentid"
			     label="学号"
			   >
			     <el-input v-model="rform.studentid" placeholder="学号" />
			   </el-form-item>
			     <el-form-item
			        prop="email"
			        label="邮箱"
			        :rules="[
			          {
			            type: 'email',
			            message: '请输入正确的邮箱',
			            trigger: ['blur', 'change'],
			          },
			        ]"
			      >
			        <el-input v-model="rform.email" placeholder="邮箱" />
			      </el-form-item>
				  <el-form-item
				     prop="telephone"
				     label="电话"
				   >
				     <el-input v-model="rform.telephone" placeholder="电话号码" />
				   </el-form-item>
		   </form>
		   
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogVisible = false">取消</el-button>
		        <el-button type="primary" @click="register">
		          注册
		        </el-button>
		      </span>
		    </template>
		  </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref ,onMounted,reactive} from 'vue'
import { ElForm, ElFormItem, ElMessageBox,ElInput, ElButton,ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { Lock, User } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'LoginPage',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
	const rform = reactive({
		username:"",
		password:"",
		rpassword:"",
		email:"",
		telephone:"",
		classid:"",
		school:"",
		studentid:'',
	})
	const datas = reactive({
		sime:false,
		unsime:false,
		classes:[
			{
				class_name:"19级网络工程1班",
				id:"19413101"
			},{
				class_name:"19级网络工程2班",
				id:"19413102"
			}],
		
	})

	const  rpinput = () =>{
		console.log(rform.password,rform.rpassword)
		if(rform.password==rform.rpassword&&rform.rpassword!=''&&rform.password!=''){
			datas.unsime = false
			datas.sime=true
		}else if(rform.password!=rform.rpassword&&rform.rpassword!=''&&rform.password!=''){	
			datas.sime=false
			datas.unsime=true
		}
	}
	const getclasslist = async () => {
		try {
		  const response = await axios.get('/login/v1/authentication/class')
		  const data = response.data
		  if (data.code == 0) {
				datas.classes = data.data.class
		  } 
		} catch (error) {
		  console.error(error)
		}
	}
	const dialogVisible = ref(false)
    const form = ref({
      username: '',
      password: '',
    })
	
	const loading = ref(false)
    const router = useRouter()
	const handleClose = (done: () => void) => {
	  ElMessageBox.confirm('确定关闭吗？')
		.then(() => {
		  done()
		})
		.catch(() => {
		  // catch error
		})
	}
    const submitForm = async () => {
		loading.value = true
		const formData = new FormData();

		if(form.value.username==''||form.value.password==''){
			return ElMessage.error("请填写账号或密码"),loading.value=false
		}
		formData.append('username', form.value.username);
		formData.append('password', form.value.password);
      try {
        const response = await axios.post('/login/v1/authentication/login',formData)
        const data = response.data
        if (data.code === 0) {
          const token = data.data.token
          localStorage.setItem('token', token)
          router.push({ name: 'home' })
		  	ElMessage.success("登陆成功！")
        }else if(data.code === 404){
			ElMessage.error("该账号不存在，请先注册")
		}else if(data.code === 405){
			ElMessage.error("密码不正确，请重试")
		}else if(data.code === 500){
			ElMessage.error("当前服务器繁忙，请稍后再试")
		}
      } catch (error) {
        console.error(error)
			
		}finally{
		  loading.value = false
	  }
    }
	const register = async () =>{
		const formData = new FormData();
		if(rform.username==""||rform.password==""){return ElMessage.error('请填写注册信息'),loading.value=false}
		formData.append('username', rform.username)
		formData.append('password', rform.password)
		formData.append('telephone', rform.telephone)
		formData.append('email', rform.email)
		formData.append('school', rform.school)
		formData.append('classid', rform.classid)
		formData.append('studentid',rform.studentid)
		loading.value = true
		try {
		  const response = await axios.post('/login/v1/authentication/users',formData)
		  const data = response.data
		  if (data.code === 0) {
		    ElMessage.success('注册成功')
			dialogVisible.value = false
			
		  }else if(data.code === 401){
			  ElMessage.error('该用户名已存在')
			  loading.value=false
			}else if(data.code === 500){
			ElMessage.error("当前服务器繁忙，请稍后再试")
		}
			
		} catch (error) {
		  console.error(error)
				}finally{
				  loading.value = false
		}
	}
	onMounted(()=>{
		getclasslist()
	})
    return {
      form,
      submitForm,
	  User,
	  Lock,
	  loading,
	  handleClose,
	  dialogVisible,
	  rform,
	  rpinput,
	  datas,
	  register
    }
  },
})
</script>

<style scoped>
.register-form .el-input{
	width: 250px;
	
}
.register-form .el-form-item{
	width: 500px;
	margin: 10px 100px 5px auto;
}
.register-form .el-form-item__content{
	width:100%;
}
.register-form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
}
.login-container {
  background-color: #f0f2f5;
  height: 100%;
  width: 100%;
}

.login-box {
  width: 96%;
  height: 92%;
  background-color: #fff;
  margin: 2% !important;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  width: 50%;
  height: 100%;
  border-radius: 30px;
  padding: 2%;
}

.right {
  border-radius: 25px;
  box-shadow: 0 2px 12px #0000001a;
  box-sizing: border-box;
  padding: 2%;
}

.login-form {
  width: 400px;
  padding: 20px;
  background-color: #fff;
}
.login-form .el-input{
	height: 3rem;
}

.login-title {
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
}
</style>
